<template>
	<div class="overflow-hidden">
		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<el-container>
					<el-aside width="150px">
						<Palette :lf="lf"/>
					</el-aside>
					<el-main>
						<Control
							class="demo-control"
							v-if="lf"
							:lf="lf"
						></Control>
						<div ref="container" style="height: 100%; width: 100%;"></div>
						<Setting v-if="currentNode" @changeStyle="changeStyle" :nodeData="currentNode"
										 class="setting-panel"></Setting>
					</el-main>
				</el-container>
				<NodePropertiesDialog
					ref="nodePropertiesDialog"
				/>
			</div>
		</n-card>
	</div>

</template>
<script setup>
import {ref, onMounted} from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import NodeRedExtension from './node-red/index'
import Palette from './node-red/tools/Palette.vue';
import Setting from './node-red/tools/Setting.vue';
import Control from './node-red/tools/Control.vue';
import './node-red/style.css'
import NodePropertiesDialog from './node-drawer/NodePropertiesDialog.vue'

const lf = ref()
const container = ref()
const currentNode = ref(null)
const nodePropertiesDialog = ref(null)

const changeStyle = (style) => {
	lf.value.setProperties(currentNode.value.id, {
		style
	})
}


onMounted(() => {
	lf.value = new LogicFlow({
		container: container.value,
		grid: {
			visible: true,
			type: 'mesh',
			size: 20,
			config: {
				color: '#eeeeee'
			}
		},
		// adjustEdge: false,
		hoverOutline: false,
		edgeSelectedOutline: false,
		keyboard: {
			enabled: true,
		},
		// 节点文本不可编辑
		nodeTextEdit: false,
		// keyboard: true,
		plugins: [
			NodeRedExtension
		]
	})
	lf.value.render()
	// lf.value.render({
	// 	nodes: [
	// 		{
	// 			id: 'node_1',
	// 			type: 'start-node',
	// 			x: 220,
	// 			y: 200,
	// 			text: 'start'
	// 		},
	// 		{
	// 			id: 'node_123_1',
	// 			type: 'vue-html',
	// 			x: 720,
	// 			y: 400,
	// 			text: '2',
	// 			properties: {
	// 				t: 3
	// 			}
	// 		},
	// 		{
	// 			id: 'node_2',
	// 			type: 'fetch-node',
	// 			x: 420,
	// 			y: 200,
	// 			text: 'fetch data'
	// 		},
	// 		{
	// 			id: 'node_3',
	// 			type: 'function-node',
	// 			x: 620,
	// 			y: 200,
	// 			text: 'function'
	// 		},
	// 		{
	// 			id: 'node_4',
	// 			type: 'delay-node',
	// 			x: 420,
	// 			y: 300,
	// 			text: 'function'
	// 		},
	// 		{
	// 			id: 'node_5',
	// 			type: 'switch-node',
	// 			x: 820,
	// 			y: 200,
	// 			text: 'switch'
	// 		},
	// 		{
	// 			id: 'node_6',
	// 			type: 'function-node',
	// 			x: 1020,
	// 			y: 200,
	// 			text: 'function'
	// 		},
	// 		{
	// 			id: 'node_7',
	// 			type: 'function-node',
	// 			x: 1020,
	// 			y: 300,
	// 			text: 'function'
	// 		}
	// 	],
	// 	edges: [
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_1',
	// 			targetNodeId: 'node_2'
	// 		},
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_2',
	// 			targetNodeId: 'node_3'
	// 		},
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_3',
	// 			startPoint: {
	// 				x: 680,
	// 				y: 200
	// 			},
	// 			targetNodeId: 'node_4'
	// 		},
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_4',
	// 			startPoint: {
	// 				x: 360,
	// 				y: 300
	// 			},
	// 			targetNodeId: 'node_2'
	// 		},
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_3',
	// 			targetNodeId: 'node_5'
	// 		},
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_5',
	// 			targetNodeId: 'node_6'
	// 		},
	// 		{
	// 			type: 'flow-link',
	// 			sourceNodeId: 'node_5',
	// 			targetNodeId: 'node_7'
	// 		}
	// 	]
	// })
	lfAffairRegister()
})

// 事件注册
const lfAffairRegister = () => {
	lf.value.on("node:click", ({data}) => {
		currentNode.value = data;
		nodePropertiesDialog.value.setProps(data, lf.value)
	});
	lf.value.on('blank:click', ({data}) => {
		currentNode.value = null
	})
}


</script>
<style scoped>
.flow-chart /deep/ .lf-red-node, .flow-chart /deep/ .lf-element-text {
	cursor: move;
}

.flow-chart /deep/ svg {
	display: block;
}

.demo-control {
	position: absolute;
	top: 50px;
	left: 250px;
	z-index: 2;
}


.setting-panel {
	position: absolute;
	top: 0;
	right: 0;
}
</style>
